Exercises

Graph Ticks

Later in this course, we'll dig into different server-based rendering strategies. To help explain how everything works, those lessons have embedded dynamic graphs like this one:

Default (no lazy loading)

This is a data visualization which shows a sequence of events between client and server. Each event is represented here as a list item.

"Render App" on server. Duration: 6 units of time.
Response from server. Duration: 4 units of time.
"Download JS" on client. Duration: 12 units of time.
"Hydrate" on client. Duration: 8 units of time.

When I build stuff like this, I generally don't use data-visualization libraries. Instead, I construct them myself, using friendly every-day DOM nodes!

In this exercise, we'll reconstruct the bottom edge of this graph:

Below, you'll find a Graph component that has some example markup. All of the styles have been provided. Your mission is to update the code so that it renders the correct number of pegs, based on the props that the component receives.

Acceptance Criteria:

The Graph component should use the provided range function to generate the correct pegs for the given from and to props.
The pegs should always increase by 10, and be inclusive of both the from and to values.
You can assume that from and to will always be multiples of 10.
There shouldn't be any key-related warnings in the console.

To clarify some of these acceptance criteria, here are some examples, showing the UI we expect to produce based on different from/to values:

-20

-10

Code Playground

import React from 'react';

import { range } from './utils';

function Graph({ from, to }) {

return (

</div>

);

}

export default Graph;

preview

console

Solution:

Rendering a grid

Suppose we're building a Scrabble-like word game, and we want to render a grid of HTML elements like this:

Here's what the DOM structure looks like, for a 2×4 grid:

<div class="grid">
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

Your mission is to replicate this structure, but for a variable number of rows and columns.

Acceptance criteria:

You've been given the template for a Grid component, which will be provided with a numRows prop for the number of rows, and a numCols prop for the number of columns.
There should be X divs with a class of row, where X is equal to the numRows prop.
Inside each row, there should be Y divs with a class of cell, where Y is equal to the numCols prop.
You should use the provided range function to solve this problem.
There shouldn't be any key-related warnings in the console.
- Note: the console isn't cleared automatically when the warnings are fixed. You can refresh the Preview pane with the icon.